<template>
  <a-row>
    <a-card>
      <a-row>
        <a-form class="a_form">
          <a-col :span="9">
            <a-form-item label="发起人" :labelCol="{ span: 3 }" :wrapperCol="{ span: 18, offset: 1 }">
              <a-input placeholder="请输入用户手机号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="联系人" :labelCol="{ span: 3 }" :wrapperCol="{ span: 18, offset: 1 }">
              <a-input placeholder="请输入用户手机号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item label="申请时间" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <a-range-picker @change="onChange" />
            </a-form-item>
          </a-col>
        </a-form>
      </a-row>
      <a-row class="selectbtn">
        <a-col span="2">
          <a-button type="primary">查询</a-button>
        </a-col>
        <a-col span="2">
          <a-button type="primary">重置</a-button>
        </a-col>
        <a-col span="2">
          <a-button type="primary">导出</a-button>
        </a-col>
      </a-row>
      <a-row class="tabbar">
        <div>
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="预约客户">
              <a-table :columns="columns" :data-source="data" :pagination="ipagination"> </a-table>
            </a-tab-pane>
            <a-tab-pane key="2" tab="预约设置" force-render>
              <a-row>
                <a-calendar @select="showModal">
                  <ul slot="dateCellRender" slot-scope="value" class="events">
                    <li v-for="item in getListData(value)" :key="item.content">
                      <a-badge :status="item.type" :text="item.content" />
                    </li>
                  </ul>
                  <template slot="monthCellRender" slot-scope="value">
                    <div v-if="getMonthData(value)" >
                      <section>{{ getMonthData(value) }}</section>
                      <span>Backlog number</span>
                    </div>
                  </template>
                </a-calendar>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-row>
    </a-card>
    <a-modal
      title="可预约人数"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-row class="rowbox">
        <div class="boxsize">
          <div><a-input placeholder="输入可预约人数" style="width:250px;margin: 75px 0 0 70px"></a-input></div>
        </div>
      </a-row>
    </a-modal>
  </a-row>
</template>

<script>
export default {
  data() {
    return {
      confirmLoading: false,
      visible: false,
      columns: [
        {
          title: '预约发起人',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '预约联系人',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '公司名称',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '申请时间',
          dataIndex: '',
          align: 'center'
        },
        {
          title: '预约时间',
          dataIndex: '',
          align: 'center'
        }
      ],
      data: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      }
    }
  },
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString)
    },
    callback(key) {
      console.log(key)
    },
    onPanelChange(value, mode) {
      console.log(value, mode)
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
      getListData(value) {
      let listData;
      switch (value.date()) {
        case 8:
          listData = [
               { type: 'success', content: '可约3人' },
          ];
          break;
        case 10:
          listData = [ ];
          break;
        case 15:
          listData = [ ];
          break;
        default:
      }
      return listData || [];
    },
     getMonthData(value) {
      if (value.month() === 8) {
        return 1394;
      }
    },
  }
}
</script>

<style lang="less" scope>
// .a_form{
//     display: flex
// }
.selectbtn {
  margin-left: 80px;
}
.tabbar {
  padding: 20px 0 0 10px;
}
.rowbox {
  display: flex;
  justify-content: center;
  align-content: center;
}
.boxsize {
  width: 400px;
  height: 200px;
  .spana {
    text-align: center;
    padding: 20px 0 20px 0;
    font-size: 20px;
  }
}
</style>
